<template>
  <!-- 项目编辑对话框 -->
  <el-dialog
    :title="$t('otherDialog.title')"
    :visible.sync="dutyRecordsVisible"
    top="25px"
    width="42%"
    @open="open()"
    :before-close="closeDialog"
  >
    <span class="main">
      <div class="dutyProple">
        <b>{{ $t("otherDialog.watch") + "：" + watch.name }}</b>
      </div>
      <div class="dutyResult">
        <h3>{{ $t("otherDialog.result.title") }}</h3>
        <el-card class="box-card">
          <div>
            <b>{{ $t("otherDialog.result.result") }}</b
            >：<el-select
              size="mini"
              style="width: 130px"
              v-model="dutyRecords.results"
              :placeholder="$t('otherDialog.result.select')"
            >
              <el-option
                v-for="item in $t('otherDialog.result.resultOptions')"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <b>{{ $t("otherDialog.result.record") }}</b
            >：
            <el-input
              type="textarea"
              :rows="2"
              resize="none"
              :placeholder="$t('otherDialog.result.recordText')"
              v-model="dutyRecords.fault_record"
            >
            </el-input>
            <el-upload
              class="upload-demo"
              ref="upload"
              accept="image/*"
              multiple
              action="http://8.218.222.193:8000/api/business/upload"
              :before-upload="beforeHandle"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              :auto-upload="true"
              list-type="text"
            >
              <!-- <el-button slot="trigger" size="mini" type="primary"
                >选择图片</el-button
              > -->
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="primary"
                @click="submitUpload"
                >{{ $t("otherDialog.result.img") }}</el-button
              >
              <div slot="tip" class="el-upload__tip">
                {{ $t("otherDialog.result.text") }}
              </div>
            </el-upload>
          </div>
        </el-card>
      </div>
      <div class="dutyFault">
        <h3>{{ $t("otherDialog.notice.title") }}</h3>
        <el-card class="box-card">
          <div>
            <b>{{ $t("otherDialog.notice.notice") }}</b
            >：<span
              ><el-select
                style="width: 130px"
                size="small"
                v-model="dutyRecords.notifier"
                filterable
                :placeholder="$t('otherDialog.result.select')"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option> </el-select
            ></span>
          </div>
          <div>
            <b>{{ $t("otherDialog.notice.descript") }}</b
            >：
            <el-input
              type="textarea"
              :rows="2"
              resize="none"
              :placeholder="$t('otherDialog.notice.descriptText')"
              v-model="dutyRecords.fault_description"
            >
            </el-input>
          </div>
          <div>
            <b>{{ $t("otherDialog.notice.way") }}</b
            >：<span>
              <el-radio v-model="dutyRecords.notify_type" :label="2">{{
                $t("otherDialog.notice.way1")
              }}</el-radio>
              <el-radio v-model="dutyRecords.notify_type" :label="1">{{
                $t("otherDialog.notice.way2")
              }}</el-radio>
            </span>
          </div>
        </el-card>
      </div>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("otherDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="send">{{
        $t("otherDialog.btn.send")
      }}</el-button>
      <el-button type="success" @click="save">{{
        $t("otherDialog.btn.save")
      }}</el-button>
    </span>
    <DutyRecordsImgDialog
      :imgVisible="imgVisible"
      :imgSrc="imgSrc"
      @closeDialog="imgVisible = false"
    ></DutyRecordsImgDialog>
  </el-dialog>
</template>

<script>
import DutyRecordsImgDialog from "./DutyRecordsImgDialog.vue";
export default {
  components: { DutyRecordsImgDialog },
  props: ["dutyRecordsVisible", "watchList", "watch"],
  data() {
    return {
      imgSrc: "",
      imgVisible: false,
      // 统计结果选择项
      resultOptions: ["异常", "无异常", "报警"],
      options: [],
      // 值班记录
      dutyRecords: {
        results: "", //统计结果
        fault_record: "", // 故障记录
        notify_type: "2", // 通知类型
        fault_img: "", // 故障图片
        notifier: "", // 通知人
        fault_description: "", // 故障描述
        duty_id: 0, // 值班id
        duty_personnel: "", //值班人员
      },
      // 上传时的文件列表
      fileList: [],
      // 上传图片 将后台返回的数据push为数组
      uploadImgList: [],
    };
  },
  methods: {
    async open() {
      // {
      //     name: "food2.jpeg",
      //     response: {
      //       url: "/media/images/微信图片_20211108092620.png",
      //     },
      //   },

      this.options = this.watchList.filter((val) => {
        return val.type == 1;
      });
      const { data: res } = await this.$http.get("/business/duty_record_info", {
        params: { id: this.watch.id },
      });
      if (!res.data) return;
      this.fileList = [];
      this.dutyRecords = res.data;
      if (res.data.notifier == 0) {
        this.dutyRecords.notifier = "";
      }
      let arr = JSON.parse(res.data.fault_img);
      console.log(arr);
      arr.forEach((val) => {
        let obj = {};
        obj.name = val.slice(14);
        obj.response = { url: val };
        this.fileList.push(obj);
        console.log(this.fileList);
      });
      // this.fileList.push()
      // console.log(JSON.parse(res.data.fault_img)[0].slice(14));
    },
    // 发送
    async send() {
      this.dutyRecords.fault_img = JSON.stringify(this.uploadImgList);
      this.dutyRecords.duty_personnel = this.watch.name;
      this.dutyRecords.duty_id = this.watch.id;
      // console.log(this.fileList);
      // console.log(this.uploadImgList);
      console.log(this.dutyRecords);
      const { data: res } = await this.$http.post(
        "/business/duty/notice",
        this.dutyRecords
      );
      console.log(res);
      if (res.code != 0)
        return this.$message.error(this.$t("otherDialog.message.error"));
      this.$message.success(this.$t("otherDialog.message.success"));
      this.fileList = [];
      this.dutyRecords = {
        results: "", //统计结果
        fault_record: "", // 故障记录
        notify_type: "2", // 通知类型
        fault_img: "", // 故障图片
        notifier: "", // 通知人
        fault_description: "", // 故障描述
        duty_id: 0, // 值班id
        duty_personnel: "", //值班人员
      };
      this.closeDialog();
    },
    // 保存值班记录
    async save() {
      this.dutyRecords.fault_img = JSON.stringify(this.uploadImgList);
      this.dutyRecords.duty_personnel = this.watch.name;
      this.dutyRecords.duty_id = this.watch.id;
      console.log(this.dutyRecords);
      const { data: res } = await this.$http.post(
        "/business/duty_log_save",
        this.dutyRecords
      );
      // console.log(res);
      if (res.code != 0)
        return this.$message.error(this.$t("otherDialog.message.save_error"));
      this.$message.success(this.$t("otherDialog.message.save_success"));
      this.closeDialog();
    },
    //
    beforeHandle(file) {
      console.log(file);
    },
    // 选择图片后 上传给后台
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 后台拿到图片后返回参数
    handleSuccess(res, file, fileList) {
      console.log(fileList);
      this.uploadImgList.push(res.url);
      console.log(this.uploadImgList);
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.uploadImgList.remove(file.response.url);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      // // 文件预览功能
      // let self = this;
      // //定义一个文件阅读器
      // var reader = new FileReader();
      // //文件装载后将其显示在图片预览里
      // reader.onload = function (e) {
      //   //将bade64位图片保存至数组里供上面图片显示
      //   self.imgSrc = e.target.result;
      // };
      // reader.readAsDataURL(file.raw);
      console.log(file);
      let url = "http://8.218.222.193:8000";
      this.imgSrc = url + file.response.url;
      this.imgVisible = true;
    },
    // 关闭弹出框
    closeDialog() {
      this.dutyRecords = {
        results: "", //统计结果
        fault_record: "", // 故障记录
        notify_type: "2", // 通知类型
        fault_img: "", // 故障图片
        notifier: "", // 通知人
        fault_description: "", // 故障描述
        duty_id: 0, // 值班id
        duty_personnel: "", //值班人员
      };
      this.$emit("closeDialog");
    },
  },
};
</script>

<style lang='less' scoped>
.upload-demo {
  width: 70%;
  // border: 1px solid red;
}
.main {
  display: block;
  //   border: 1px solid red;
  b {
    color: #606266;
    font-size: 16px;
  }
  .dutyProple {
    font-size: 20px;
    text-align: center;
  }
  .box-card {
    margin-bottom: 10px;
    div {
      padding: 10px 0 10px 0;
    }
  }
}
</style>